<template>
  <div>
    item2
    <ProModal v-model:visible="visible" ref="proModal" @ok="handleOk">
      <div style="height: 100px">弹框内容弹框内容</div>
      <div style="height: 100px">弹框内容弹框内容</div>
      <div style="height: 100px">弹框内容弹框内容</div>
      <div style="height: 100px">弹框内容弹框内容</div>
      <div style="height: 100px">弹框内容弹框内容</div>
      <div style="height: 100px">弹框内容弹框内容</div>
      <div style="height: 100px">弹框内容弹框内容</div>
    </ProModal>
    <ElButton @click="open">按钮</ElButton>
  </div>
  <MapPosition class="mt-6" @select-address="handleSelectAddress" />
  <div class="mt-6" v-if="loactionInfo.address">
    <div class="mb-2">地址：{{ loactionInfo.address }}</div>
    <div class="mb-2">纬度：{{ loactionInfo.lat }}</div>
    <div class="mb-2">经度：{{ loactionInfo.lon }}</div>
  </div>
  <div class="mt-6" v-else>
     请选择地址信息
  </div>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import { ElButton } from "element-plus";
import { ProModal } from "@/components/ProComponents/index";
import { MapPosition } from "@/components/index";

const proModal = ref();

const visible = ref(false);

const loactionInfo = reactive({
  address: undefined,
  lon: undefined,
  lat: undefined,
});

const open = () => {
  visible.value = true;
};

//地址信息选择回调
const handleSelectAddress = (val: any) => {
  loactionInfo.address = val.address;
  loactionInfo.lon = val.lon;
  loactionInfo.lat = val.lat;
};

//弹框确认
const handleOk = () => {
  proModal.value.setloading(true);
  setTimeout(() => {
    proModal.value.close();
    proModal.value.setloading(false);
  }, 1000);
};
</script>
